<template>
	<view>
		<!-- <page-head :title="title"></page-head> -->
		<!-- <view class="uni-padding-wrap">
			<view class="uni-title">
				日期：{{year}}年{{month}}月{{day}}日{{hour}}时{{minute}}分
			</view>
		</view> -->
		<picker-view v-if="visible" :indicator-style="indicatorStyle" :mask-style="maskStyle" :value="value"
			@change="bindChange">
			<picker-view-column>
				<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// title: 'picker-view',
				years: [],
				year: new Date().getFullYear(),
				months: [],
				month: new Date().getMonth() + 1,
				days: [],
				day: new Date().getDate(),
				hours: [],
				hour: ('0' + new Date().getHours()).slice(-2),
				minutes: [],
				minute: new Date().getMinutes(),
				value: [0, 0, 0, 0, 0],
				/**
				 * 解决动态设置indicator-style不生效的问题
				 */
				visible: true,
				// indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
				indicatorStyle: `height: 50px;`,
				// #ifdef MP-KUAISHOU
				maskStyle: "padding:10px 0"
				// #endif
				// #ifndef MP-KUAISHOU
				maskStyle: ""
				// #endif
			}
		},
		onReady() {
			this.getTime()
			this.$emit('dataTime', `${this.year}年${this.month}月${this.day}日${this.hour}时${this.minute || "00"}分`);
		},
		onShow() {
			this.getTime()
		},
		methods: {
			getTime() {
				this.years = []
				this.months = []
				this.days = []
				this.hours = []
				this.minutes = []
				for (let i = new Date().getFullYear(); i <= new Date().getFullYear() + 10; i++) {
					this.years.push(i)
				}

				for (let i = 1; i <= 12; i++) {
					let y = new Date().getMonth() + 1
					if (this.year == new Date().getFullYear()) {
						if (i >= y) {
							this.months.push(i)
						}
					} else {
						this.months.push(i)
					}
				}

				for (let i = 1; i <= 31; i++) {
					if (this.year == new Date().getFullYear() &&
						this.month == new Date().getMonth() + 1) {
						if (i >= new Date().getDate()) {
							this.days.push(i)
						}
					} else {
						this.days.push(i)
					}

				}
				for (let i = 0; i <= 23; i++) {
					if (this.year == new Date().getFullYear() &&
						this.month == new Date().getMonth() + 1 &&
						this.day == new Date().getDate()) {
						if (i >= new Date().getHours()) {
							// console.log(i,'hours');
							i = ('0' + i).slice(-2)
							this.hours.push(i)
						}
					} else {
						i = ('0' + i).slice(-2)
						this.hours.push(i)
					}

				}
				for (let i = 0; i <= 59; i++) {
					if (this.year == new Date().getFullYear() &&
						this.month == new Date().getMonth() + 1 &&
						this.day == new Date().getDate() &&
						this.hour == new Date().getHours()) {
						if (i >= new Date().getMinutes()) {
							i = ('0' + i).slice(-2)
							// console.log(i,'minutes');
							this.minutes.push(i)
						}
					} else {
						i = ('0' + i).slice(-2)
						this.minutes.push(i)
					}
				}
				
			},
			bindChange(e) {
				const val = e.detail.value
				// console.log(val, 'val');
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
				this.hour = this.hours[val[3]]
				this.minute = this.minutes[val[4]]
				this.getTime()
				this.$emit('dataTime', `${this.year}年${this.month}月${this.day}日${this.hour}时${this.minute}分`);
			}
		}
	}
</script>

<style>
	picker-view {
		width: 100%;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}
</style>



<style>
</style>